<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap">
			<button type="primary" :loading="loading">页面主操作 loading</button>
			<button type="default" :loading="true">页面次要操作 disabled</button>
			<button type="warn" @click="goto">警告类操作 normal</button>
			
			<view class="button-sp-area">
				<button type="primary" plain="true">镂空按钮</button>
				<button type="default" plain="true">镂空按钮</button>
				<button type="warn" plain="true">镂空按钮</button>
				<button type="default" disabled="true" plain="true">不可点击按钮</button>
				<button class="mini-btn" type="primary" size="mini">按钮</button>
				<button class="mini-btn" type="default" size="mini">按钮</button>
				<button class="mini-btn" type="warn" size="mini">按钮</button>
			</view>

			<button open-type="launchApp" app-parameter="uni-app" @error="openType">打开app</button>
			<button open-type="feedback">意见反馈</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "按钮示例",
				loading: true
			}
		},
		methods: {
			goto() {
				uni.showToast({
					title: "点击了警告按钮",
					icon: "none"
				})
			},
			openType(e) {
				console.log("open-type 出错：", e)
			}
		}
	}
</script>

<style>
.mini-btn {
	margin: 5rpx;
}
.uni-padding-wrap {
	padding: 30rpx;
	background-color: #ffffff; 
	border-radius: 12rpx;
}

.button-sp-area {
	margin-top: 30rpx;
	padding: 20rpx;
	background-color: #ffffff; 
	border-radius: 10rpx;
}

</style>
